<!-- 审批中心流程列表的筛选条件-->
<template>
  <view>
    <!-- @touchmove.stop：解决下拉刷新冲突问题 -->
    <van-action-sheet
      v-model:show="showCompo"
      title="筛选"
      :closeable="true"
      cancel-text=""
      close-on-click-overlay
      @click-overlay="toCancel"
      @closed="closed"
      :style="{ height: '80%' }"
      @cancel="toCancel"
      @touchmove.stop
    >
      <view class="container-top">
        <!-- 流程状态筛选条件 -->
        <!-- <view class="button-group" v-if="showStateCondition && processStateList.length > 0">
          <view>
            <van-collapse v-model="activeCollapseStatus">
              <van-collapse-item name="status" :border="false">
                <template #title>
                  <view class="fs fwb van-ellipsis"> 状态 </view>
                </template>
                <van-grid :column-num="2" :border="false">
                  <van-grid-item
                    v-model:value="selectedState"
                    v-for="(item, index) in processStateList"
                    :key="index"
                  >
                    <view
                      :class="[
                        selectedState === item.value ? 'checkeded_button' : 'uncheckeded_button',
                      ]"
                      @click="tapStateButton(item.value)"
                    >
                      {{ item.name }}
                    </view>
                  </van-grid-item>
                </van-grid>
              </van-collapse-item>
            </van-collapse>
          </view>
        </view> -->

        <!-- 表单筛选条件 -->
        <view v-for="(app, index) in appInfos" :title="app.label" :key="index">
          <van-collapse v-model="activeCollapse">
            <van-collapse-item :name="app.value" :border="false">
              <template #title>
                <view class="fs fwb van-ellipsis"> {{ app.label }} </view>
              </template>
              <van-grid :column-num="2" :border="false">
                <van-grid-item
                  v-model:value="selectedFormId"
                  v-for="(item, indexChild) in app.children"
                  :key="indexChild"
                >
                  <view
                    :class="[
                      selectedFormId === item.value ? 'checkeded_button' : 'uncheckeded_button',
                    ]"
                    @click="tapButton(item.value)"
                  >
                    {{ item.label }}
                  </view>
                </van-grid-item>
              </van-grid>
            </van-collapse-item>
          </van-collapse>
        </view>
      </view>
      <!-- 操作按钮，提交和取消 -->
      <view class="css safe-area-inset-bottom">
        <van-row type="flex" justify="space-around">
          <van-col span="10">
            <van-button type="primary" round plain block @click.prevent="toReset">重置</van-button>
          </van-col>
          <van-col span="10">
            <van-button type="primary" round block @click="onSubmit">确定</van-button>
          </van-col>
        </van-row>
      </view>
    </van-action-sheet>
  </view>
</template>

<script setup lang="ts">
  import { onMounted, ref, watch, watchEffect } from 'vue';
  import { appFormTreeWithIconApi } from '@/api/workflow/app';
  import { TaskStatusEnum } from '@/enums/workFlowEnum';
  import { isNotBlank } from '@/utils/is';

  const props = defineProps({
    showSearchFilter: {
      type: Boolean,
      default: false,
    },
    // 选中的页签，如待我处理或我已处理
    tabType: {
      type: String,
      default: '',
    },
  });

  const emit = defineEmits(['closeSearchFilter', 'submitSearchFilter']);

  const loadType = ref(props.tabType); //默认加载待我处理
  const showStateCondition = ref(false); //判断是否显示流程状态条件，如果是我已处理和我发起的，则显示
  const selectedFormId = ref(''); //选中的表单id
  const selectedState = ref(''); //选中的流程状态id
  const showCompo = ref(false); //当前组件显隐
  const appInfos = ref<WorkComponent.AppTreeNode[]>([]); //表单分组
  const activeCollapse = ref<string[]>([]); //折叠面板，需要展开的选项数组
  const activeCollapseStatus = ref(['status']); //折叠面板,流程状态展开
  // 关闭当前弹框
  const toCancel = () => {
    emit('closeSearchFilter');
  };
  //重置，清除已选条件
  const toReset = () => {
    selectedFormId.value = '';
    selectedState.value = '';
  };

  //关闭面板且动画结束后触发
  const closed = () => {
    emit('closeSearchFilter');
  };

  //加载表单数据
  const loadData = async () => {
    await appFormTreeWithIconApi().then(({ data }) => {
      appInfos.value = data;
      activeCollapse.value = data.map((item: WorkComponent.AppTreeNode) => item.value);
    });
  };

  //确认按钮，提交给父组件进行下一步逻辑
  const onSubmit = () => {
    emit('submitSearchFilter', selectedState.value, selectedFormId.value);
  };

  //表单单选
  const tapButton = (value: any) => {
    selectedFormId.value = value;
  };

  //流程状态单选
  const tapStateButton = (value: any) => {
    selectedState.value = value;
  };

  //监听页签变化，变化了就重置条件
  watch(
    () => props.tabType,
    (newValue, oldValue) => {
      if (newValue !== oldValue) {
        selectedFormId.value = '';
        selectedState.value = '';
      }
    },
  );
  watchEffect(() => {
    showCompo.value = props.showSearchFilter;

    loadType.value = props.tabType;
    //判断是否显示流程状态条件，如果是我已处理和我发起的，则显示
    if (isNotBlank(props.tabType)) {
      if (TaskStatusEnum.COMPLETE == props.tabType || TaskStatusEnum.STARTED === props.tabType) {
        showStateCondition.value = true;
      } else {
        showStateCondition.value = false;
      }
    }
  });
  onMounted(() => {
    loadData();
  });
</script>

<style scoped lang="scss">
  .css {
    text-align: center;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 1%;
    background-color: #ffffff;
  }
  .desc {
    background-color: #ffffff;
    padding: 10rpx 32rpx;
    color: black;
  }
  .container-top {
    height: calc(100% - 120rpx);
    padding: 6rpx 0 20rpx;
    overflow: auto;
    .upload {
      width: 96%;
      margin: 30rpx auto;
    }
  }

  ::v-deep .van-grid {
    justify-content: flex-start;
  }
  ::v-deep .van-grid-item__content {
    padding: 14rpx;
  }
  .button-group {
    box-sizing: border-box;
  }

  .checkeded_button {
    width: 100%;
    text-align: center;
    background-color: #0289fe !important;
    color: #ededed !important;
    border: none !important;
    border-radius: 20rpx;
    height: 80rpx;
    line-height: 80rpx;
    font-size: 28rpx;
    box-sizing: border-box;
    border: 1rpx solid #e4e4e4 !important;
  }
  .uncheckeded_button {
    width: 100%;
    text-align: center;
    background-color: #ffffff !important;
    color: #000000 !important;
    border-radius: 20rpx;
    height: 80rpx;
    line-height: 80rpx;
    box-sizing: border-box;
    font-size: 28rpx;
    border: 1rpx solid #e4e4e4 !important;
  }
</style>
